<template>
  <div class="change">
    <div class="changeList" @click="handBlackString">
      {{Firstlist[Findex]}}
      <ul class="mask" v-show="Fflag">
        <li v-for="(item,index) in Firstlist" :key="index" @click="handChangeFindex(index)">{{item}}</li>
      </ul>
    </div>
    <div class="changeList" @click="handBlackNum">
      {{NumList[Numindex]}}
      <ul class="mask" v-show="Nflag">
        <li v-for="(item,index) in NumList" :key="index" @click="handChangeNindex(index)">{{item}}</li>
      </ul>
    </div>
    <div class="changeRadom">换一批</div>
    <!-- 每一个单独下拉的东西 -->
    <ul class="columnsList">
      <li v-for="(item,index) in columnsList" :key='index'>
        <span v-for="(item,index) in ArrayList" :key='index'>{{item}}</span>
        <span class="blue_cha">30</span>
      </li>
      
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);

export default {
  name: "ceshi",
  data() {
    return {
      Findex: 0,
      Numindex: 0,
      Fflag: false,
      Nflag: false,
      columnsList:1,
      ChangeList:[1,5,10],
      Firstlist: ["机选1注", "机选5注", "机选10注"],
      NumList: ["6+1", "6+2", "7+1", "7+2", "8+1", "8+2"]
    };
  },
  props:{
    ArrayList:{
      type:Array,
      required:true,
    }
  },
  methods: {
    handBlackString() {
      this.Fflag = !this.Fflag;
    },
    handBlackNum() {
      this.Nflag = !this.Nflag;
    },
    handChangeFindex(index) {
      this.Findex = index;
      // 在此获取条数
      this.columnsList=this.ChangeList[this.Findex];
    },
    handChangeNindex(index) {
      this.Numindex = index;
    }
  },
};
</script>

<style scoped>
.change {
  height: 0.33rem;
  padding: 0.1rem 0;
  display: flex;
  justify-content: space-around;
}
.changeList {
  width: 1rem;
  height: 0.33rem;
  background: #fff;
  border: 0.01rem solid #e4e4e4;
  font-size: 0.12rem;
  color: #333333;
  line-height: 0.33rem;
  text-align: center;
  position: relative;
}
.changeRadom {
  width: 0.93rem;
  height: 0.33rem;
  border: 1px solid #e4e4e4;
  color: #999999;
  font-size: 12px;
  line-height: 0.33rem;
  text-align: center;
}
.mask {
  z-index: 99;
  position: absolute;
  left: 0;
}
.mask li {
  background: #fff;
  width: 1rem;
}

/* 每一条的大样式 */
.columnsList {
  position: absolute;
  width: 3.45rem;
  top: 1rem;
}

/* 每一条的样式 */

.columnsList li {
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(248, 72, 72, 1);
  height: .4rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(242, 242, 242, 1);
  margin:.1rem 0;
}

.columnsList li span{
  float: left;
  line-height: .4rem;
    font-size:.15rem;
    margin-left:.1rem;
    flex-direction:column;
}
.blue_cha{
  color: #5F92FB;
}
</style>